<template>
      <div class="tiktok-main">
            <el-col :span="24" class="tiktok-top">
                  <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>
                  <el-col :md="8" :xs="22" :sm="18">
                        <h3>二饭的抖音无码解析</h3>
                  </el-col>
                  <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>
            </el-col>
            <el-col :span="24" class="tiktok-middle">
                  <el-col :xs="1" :sm="4" :md="6" class="perchbox"></el-col>
                  <el-col :xs="22" :sm="16" :md="12" class="tiktok-content">
                        <el-col :sm="11" :md="11" :xs="24" class="tiktok-content-form">
                              <el-col :md="1" class="perchbox"></el-col>
                              <el-col :md="22" class="tiktok-form-main">
                                    <el-col :span="24" class="tiktok-form-top"></el-col>
                                    <p>请粘贴抖音分享链接：</p>
                                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入抖音分享链接" v-model="url" class="tiktok-textarea"> </el-input>
                                    <el-col :span="24">
                                          <el-col :md="5" :sm="2" :xs="2" class="perchbox"></el-col>
                                          <el-col :md="14" :sm="20" :xs="20" class="tiktok-submit-box">
                                                <el-col :span="24" class="tiktok-submit" @click.native="submit()">开始解析</el-col>
                                          </el-col>
                                          <el-col :md="5" :sm="2" :xs="2" class="perchbox"></el-col>
                                    </el-col>
                              </el-col>
                              
                              <el-col :md="1" class="perchbox hidden-xs-only"></el-col>
                              <el-col :md="24" class="hidden-xs-only tiktok-content-form-bottom"></el-col>
                        </el-col>
                        <el-col :md="1" class="tiktok-content-form-right hidden-xs-only"></el-col>

                        <el-col :sm="12" :md="12" :xs="24" class="tiktok-content-result">
                              <el-col :span="24" class="tiktok-result-top"></el-col>
                              <el-col :span="24" class="tiktok-result-item">
                                    <el-col :span="9" class="tiktok-content-text">视频HTTP链接：</el-col>
                                    <el-col :span="13">
                                          <el-input placeholder="预览HTTP链接" v-model="httpUrl" id="httpUrl"></el-input>
                                    </el-col>
                                    <el-col :span="2" class="tiktok-result-copy" title="复制链接" @click.native="copyUrl(1)"><img src="img/copy.png" alt="复制" class="tiktok-copy-img"></el-col>
                              </el-col>
                              <el-col :span="24" class="tiktok-result-item">
                                    <el-col :span="9" class="tiktok-content-text">视频HTTPS链接：</el-col>
                                    <el-col :span="13">
                                          <el-input placeholder="预览HTTPS链接" v-model="httpsUrl" id="httpsUrl"></el-input>
                                    </el-col>
                                    <el-col :span="2" class="tiktok-result-copy" title="复制链接" @click.native="copyUrl(2)"><img src="img/copy.png" alt="复制" class="tiktok-copy-img"></el-col>
                              </el-col>
                              <el-col :span="24" class="tiktok-result-item">
                                    <el-col :span="9" class="tiktok-content-text">音乐链接：</el-col>
                                    <el-col :span="13">
                                          <el-input placeholder="预览音乐链接" v-model="musicUrl" id="musicUrl"></el-input>
                                    </el-col>
                                    <el-col :span="2" class="tiktok-result-copy" title="复制链接" @click.native="copyUrl(3)">
                                          <img src="img/copy.png" alt="复制" class="tiktok-copy-img" />
                                    </el-col>
                              </el-col>
                        </el-col>
                  </el-col>
                  <el-col :xs="1" :sm="4" :md="6" class="perchbox hidden-xs-only"></el-col>
            </el-col>
            <el-col :span="24" class="tiktok-bottom">
                  <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>
                  <el-col :md="8" :xs="22" :sm="18">
                              <el-col :span="24" class="tiktok-form-back">
                                    <div class="tiktok-back-box" @click="close()">
                                          <img src="img/close.png" alt="关闭系统"> 关闭系统
                                    </div>
                              </el-col>
                  </el-col>
                  <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>


            </el-col>
      </div>
</template>




<script>
export default {
      props: [],
      data() {
            return {
                  url:'',
                  musicUrl:'',
                  httpUrl:'',
                  httpsUrl:''
            }
      },
      methods:{
            copyUrl(copy){
                  if(copy==1){
                        // 复制视频http
                        let input = document.getElementById('httpUrl');
                        input.select();

                  }else if(copy==2){
                        // 复制视频https
                        let input = document.getElementById('httpsUrl');
                        input.select();


                  }else{
                        // 复制音乐链接
                        let input = document.getElementById('musicUrl');
                        input.select();

                  }
                  if(document.execCommand('copy')){
                        this.$message({
                              message: '链接已经复制成功！',
                              type: 'success'
                        });
                  }else{
                        this.$message({
                              message: '链接复制失败！',
                              type: 'error'
                        });
                  }
            },
            submit(){
                  let index = this.url.indexOf('https');
                  if(index==-1){
                        this.$message({
                                    message: '请复制合法的视频链接而非口令！',
                                    type: 'warning'
                              });
                  }else{
                        const that=this;
                        let format=new FormData();
                        format.append("url",this.url)
                        this.$axios({
                              method:'post',
                              url:this.$url+"/api/douyin",
                              data:format
                        }).then(function(ret){
                              that.musicUrl=ret.data.data.musicUrl;
                              that.httpUrl=ret.data.data.httpUrl;
                              that.httpsUrl=ret.data.data.httpsUrl;
                        })
                  }
            },
            close(){
                  this.$router.push('/index');
            }
      }
};
</script>






<style lang="less" scope>
      .tiktok-main{
            height: 100vh;

            .tiktok-top{
              height: 10vh;

                  h3{
                        color: #7F8AFF;
                        background: linear-gradient(to right, red, blue);
                        -webkit-background-clip: text;
                        color: transparent;
                        -webkit-text-fill-color: transparent;
                        text-fill-color: transparent;
                        margin-top: 3vh;
                  }
            }
            .tiktok-middle{
                  .tiktok-content{
                        padding: 30px 50px;
                        height: auto;
                        border-radius: 15px;
                        box-shadow: 2px 2px 15px #bbc0c0;

                        .tiktok-content-form-right{
                              border-right: 1px solid black;
                              height: 60vh;
                        }
                        .tiktok-content-form{
                              .tiktok-content-form-bottom{
                                    height: 20vh;
                              }
                              
                              // border-right: 1px solid #bbc0c0;
                              .tiktok-form-main{
                                    height: 40vh;
                              }

                              .tiktok-form-top{
                                    height: 3vh;
                              }

                              .tiktok-submit-box{
                                    margin-top: 5vh;
                                    position: relative;
                                    padding: 5px;
                                    cursor:pointer;
                              }
                              p{
                                    line-height: 50px;
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: #303133;
                              }
                              .tiktok-textarea{
                                    width: 80%;
                              }
                              .tiktok-submit{
                                    
                                    height: 50px;
                                    line-height: 50px;
                                    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
                                    border-radius: 30px;
                                    background-size: 400%;
                                    font-size: 22px;
                                    text-transform: uppercase;
                                    color: white;
                                    animation:animate 8s linear infinite;
                              }
                              @keyframes animate {
                                    0%{
                                          background-position: 0%;
                                    }
                                    100%{
                                          background-position: 400%;
                                    }
                              }
                              .tiktok-submit::before{
                                    content: '';
                                    position: absolute;
                                    top: -5px;
                                    left: -5px;
                                    right: -5px;
                                    bottom: -5px;
                                    z-index: -1;
                                    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
                                    border-radius: 40px;
                                    background-size: 400%;
                                    opacity: -1;
                                    transition: 0.5s;
                              }
                              .tiktok-submit:hover::before{
                                    filter: blur(20px);
                                    opacity: 1;
                              }
                        }
                        .tiktok-content-result{

                              .tiktok-result-top{
                                    height: 6vh;
                              }
                              .tiktok-result-item{
                                    // display: flex;
                                    // align-items: center;
                                    // justify-items: center;
                                    height: 50px;

                                    .tiktok-result-copy{
                                          height: 40px;
                                          display: flex;
                                          align-items: center;

                                          .tiktok-copy-img{
                                                margin-left: 5px;
                                                height: 20px;
                                          }
                                    }
                              }
                              .tiktok-content-text{

                                    line-height: 40px;
                                    font-size: 14px;
                                    font-weight: 700;
                                    display: -webkit-box;
                                    overflow: hidden;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                              }
                        }
                  }
            }
            .tiktok-bottom{
                  .tiktok-form-back{
                        height: 10vh;
                        position: relative;
            
                        
                        .tiktok-back-box{
                              position: absolute;
                              left:50%;
                              top:50%;
                              transform: translate(-50%, -50%);

                              display:flex;
                              align-items: center;
                              justify-items: center;
                              font-size: 14px;
                              font-weight: 700;
                              height: 40px;
                              padding: 0 20px;
                              width: 130px;
                              border-radius: 20px;
                              box-shadow: 1px 1px 5px #bbc0c0;
                              cursor:pointer;
                        }
                        img{
                              width: 20px;
                              margin-right: 7px;
                        }
                  }
            }
      }
</style>